<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>七牛存储在线管理系统</title>
    <link rel="stylesheet" href="/static/css/layui.css">
    <style>
        .picture-preview {
            width: 100%;
            height: 300px;
            border: solid 1px #eee;
            margin: 20px 0;
            background-color: #eee;
            color: #000;
        }

        .picture-preview:hover {
            color: #000;
        }

        .picture-preview .selectBtn {
            width: 120px;
            height: 50px;
            line-height: 50px;
            margin: 120px auto;
            border: solid 1px #000;
            border-radius: 5px;
        }
    </style>
</head>
<?php include 'nav.php'; ?>
<div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <div class="position">
			<span class="layui-breadcrumb">
				<a href="/">首页</a>
				<a><cite>添加资源</cite></a>
			</span>
        </div>
        <div class="content">
            <div class="layui-btn picture-preview" id="uploadFile">
                <div class="selectBtn">
                    <i class="layui-icon layui-icon-upload-drag"></i>选择文件
                </div>
            </div>
            <p style="margin-top: 50px;">
                <button class="layui-btn layui-btn-fluid" id="ListAction">上传</button>
            </p>
        </div>
    </div>
</div>
<div class="layui-footer">
    <!-- 底部固定区域 -->
    © Online-gallery系统
</div>
</div>
<script src="/static/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'upload', 'jquery'], function () {
        var element = layui.element;
        var upload = layui.upload;
        //执行实例
        upload.render({
            elem: '#uploadFile' //绑定元素
            , url: '/upload/' //上传接口
            , accept: 'file' //允许上传的文件类型
            , size: 0 //最大允许上传的文件大小
            , method: 'post'
            , auto: false
            , field: 'file'
            , bindAction: '#ListAction'
            , before: function (obj) {
                layer.msg('上传中~~~',{icon:1});
            }
            , done: function (res, index, upload) {
                layer.closeAll('loading'); //关闭loading
                layer.msg(res.msg)
            }
            , error: function (index, upload) {
                layer.closeAll('loading'); //关闭loading
            }
        });
    });
</script>
</body>
</html>
